<template>
    <div>
        <div>
            <nav-bar title="充值" :show-back="true"/>
        </div>
        <div>
            <div class="head">充值金额</div>
            <div class="singleMoney_div">
                <div>
                    <div class="singleMoney" @click="tabClick(10)">
                        <div :class="['MoneyText',{ active: selectedTab === 10 }]">10</div></div>
                    <div class="singleMoney" @click="tabClick(30)">
                        <div :class="['MoneyText',{ active: selectedTab === 30 }]">30</div>
                    </div>
                    <div class="singleMoney" @click="tabClick(50)">
                        <div :class="['MoneyText',{ active: selectedTab === 50 }]">50</div>
                    </div>
                </div>
                <div style="margin-top:.2rem">
                    <div class="singleMoney" @click="tabClick(100)">
                        <div :class="['MoneyText',{ active: selectedTab === 100 }]">100</div></div>
                    <div class="singleMoney" @click="tabClick(200)">
                        <div :class="['MoneyText',{ active: selectedTab === 200 }]">200</div>
                    </div>
                    <div class="singleMoney" @click="tabClick(300)">
                        <div :class="['MoneyText',{ active: selectedTab === 300 }]">300</div>
                    </div>
                </div>
            </div>
            <div>
                <yd-cell-group>
                    <yd-cell-item>
                        <span slot="left" style="font-size:120%;width:.5rem;">￥</span>
                        <yd-input slot="right" placeholder="请输入其他金额" v-model="money"></yd-input>
                    </yd-cell-item>
                </yd-cell-group>
            </div>
        </div>
        <div class="middle">
            <div style="font-size:140%;margin-left:4%;padding-top:5%">支付方式</div>
            <div>
                <yd-radio-group v-model="payType">
                    <yd-radio val="bank" class="radio">
                        <img src="../../img/card.png" class="payIcon" style="width:.55rem;height:.55rem;top:.15rem">
                        <span class="payText">银行卡</span>
                    </yd-radio>
                    <div class="line"></div>
                    <yd-radio val="alipay" class="radio">
                        <img src="../../img/alipay.png" class="payIcon">
                        <span class="payText">支付宝</span>
                    </yd-radio>
                    <div class="line"></div>
                    <yd-radio val="weixin" class="radio">
                        <img src="../../img/weixin.png" class="payIcon">
                        <span class="payText">微信</span>
                    </yd-radio>
                </yd-radio-group>
            </div>
        </div>
        <div>
            <yd-button size="large" bgcolor="#00B2EE" color="#fff">充值</yd-button>
        </div>
    </div>
</template>
<script>
import NavBar from '../../components/navbar/NavBar.vue'
export default {
    name: 'Recharge',
    components: {
        NavBar
    },
    data () {
        return {
            payType: '',
            selectedTab: 0,
            money: ''
        }
    },
    methods: {
        tabClick (num) {
            this.selectedTab = num
            this.money = num
        }
    }
}
</script>
<style scoped>
.head{background-color: white; font-size: 140%; padding-left: 4%; padding-top: 5%;height: 1rem;}
.middle{background-color: #fff; height: 4.6rem;}
.radio{display: block; margin-left: 4%; margin-top: 4%}
.payIcon{width: .5rem; height: .5rem; position: relative; top: .1rem; left: .3rem;}
.payText{margin-left: 6%}
.line { height: 1px; border-top: 1px solid rgb(235, 234, 234); text-align: center; margin-top: 4.5%; width: 80%; margin-left: auto; margin-right: auto}
.singleMoney_div{background-color: #fff;}
.singleMoney{width: 1.6rem; display: inline-block; height: 1rem; border: 1px solid lightblue;margin-left: .62rem;}
.MoneyText{display: flex; justify-content: center; align-items: center;height: 100%;width: 100%; font-size: 130%}
.MoneyText.active{background-color: lightblue}
</style>
